<template>
  <div>
    <a-card :bordered="false">
      <f-search-form @searchHandler="searchHandler">
        <f-search-form-item label="订单编号" name="orderNo"/>
        <f-search-form-item label="订单日期" name="rangeDate" type="range" slot="advanced"/>
      </f-search-form>
      <f-table ref="table" size="default" rowKey="orderId" :columns="columns" :scroll="scroll" handler="shopOrderListHandler" :operator="operator" :params="queryParam" :api="api.order" @onExpand="onExpand" :autoLoad="false" @onSuccess="onSuccess">
        <span slot="status" slot-scope="text, record, index">
          <a-select placeholder="请选择" @change="(value)=> setStatus(value,record)" style="width: 150px;" :value="getText(text)" optionLabelProp="label">
            <a-select-option value="1">已上架</a-select-option>
            <a-select-option value="2">已下架</a-select-option>
            <a-select-option value="3">违规下架</a-select-option>
          </a-select>
        </span>
        <span slot="recommend" slot-scope="text, record, index">
          <a-switch v-model="record.recommend==1" checkedChildren="是" unCheckedChildren="否" @change="(checked) => setRecommend(checked,record)"/>
        </span>
        <span slot="receiveMan" slot-scope="text, record, index">
          <p>收货人：{{record.receiveMan}}<span style="padding-left: 80px">联系方式：{{record.receiveTel}}</span></p>
          <p>收货地址：{{record.receiveAddress}}</p>
        </span>

        <span slot="orderState" slot-scope="text, record, index">
            <a-tag color="#2db7f5" v-if="text==1">待付款</a-tag>
            <a-tag color="red" v-if="text==20">待发货</a-tag>
            <a-tag color="#87d068" v-if="text==21">待收货</a-tag>
            <a-tag color="#f50" v-if="text==3">已完成</a-tag>
            <a-tag color="purple" v-if="text==4">已取消</a-tag>
        </span>

        <span slot="payState" slot-scope="text, record, index">
            <a-tag color="#87d068" v-if="text==0">未支付</a-tag>
            <a-tag color="#108ee9" v-if="text==1">已支付</a-tag>
            <a-tag color="#108ee9" v-if="text==2">已退款</a-tag>
        </span>

        <span slot="action" slot-scope="text, record">
          <template>
            <a href="javascript:;" @click="$refs.orderDrawer.handleShow(record)">编辑</a>
            <a-divider type="vertical"/>
          </template>
          <a-dropdown>
            <a class="ant-dropdown-link">
              更多 <a-icon type="down"/>
            </a>
            <a-menu slot="overlay">
              <a-menu-item v-if="$auth('table.delete')">
                <a href="javascript:;" @click="cancleOrder(record.orderId)">取消订单</a>
              </a-menu-item>
                <a-menu-item v-if="$auth('table.delete')">
                <a href="javascript:;" @click="$refs.table.remove(record.orderId)">删除订单</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>

        <a-table slot="expandedRowRender" slot-scope="text" :columns="innerColumns" :dataSource="orderDetailsData" :pagination="false" style="padding: 2px;border: none" size="middle" :bordered="false">
           <span slot="productImages" slot-scope="text, record, index">
          <img v-lazy="record.productImages" v-viewer class="radius-img">
        </span>
          <span slot="operation" slot-scope="text" class="table-operation">
              <a href="javascript:;">Pause</a>
              <a href="javascript:;">Stop</a>
              <a-dropdown>
                <a-menu slot="overlay">
                  <a-menu-item>
                    Action 1
                  </a-menu-item>
                  <a-menu-item>
                    Action 2
                  </a-menu-item>
                </a-menu>
                <a href="javascript:;"> More <a-icon type="down"/> </a>
              </a-dropdown>
            </span>
        </a-table>

      </f-table>
    </a-card>
    <order-drawer ref="orderDrawer"></order-drawer>
  </div>
</template>

<script>

  import OrderDrawer from './order_drawer'

  export default {
    name: 'ListAll',
    components: { OrderDrawer },
    data() {
      return {
        //列表初始化查询参数
        queryParam: {},
        scroll: { x: 1500 },
        firstCategory: [],
        onLineState: [{ value: '2', label: '已下架' }, { value: '3', label: '违规下架' }],
        skuList: [],
        // 表头
        columns: [
          { title: '订单编号', align: 'center', dataIndex: 'orderNo' },
          { title: '件数', dataIndex: 'productCount' },
          { title: '订单金额', align: 'center', dataIndex: 'totalAmount' },
          { title: '优惠', align: 'center', dataIndex: 'couponAmount' },
          { title: '折扣', align: 'center', dataIndex: 'discountAmount' },
          { title: '运费', align: 'center', dataIndex: 'freightAmount' },
          { title: '支付金额', align: 'center', dataIndex: 'payAmount' },
          { title: '收货信息', align: 'left', dataIndex: 'receiveMan', scopedSlots: { customRender: 'receiveMan' } },
          { title: '下单日期', dataIndex: 'createTime', sorter: true },
          { title: '订单状态', dataIndex: 'orderState',fixed: 'right', scopedSlots: { customRender: 'orderState' } },
          /* { title: '支付状态', dataIndex: 'payState', scopedSlots: { customRender: 'payState' } },*/
          { title: '操作', dataIndex: 'action', align: 'center', fixed: 'right', scopedSlots: { customRender: 'action' } }
        ],
        innerColumns: [
          { title: '商品图', align: 'center', dataIndex: 'productImages', scopedSlots: { customRender: 'productImages' } },
          { title: '商品名称', dataIndex: 'productTitle' },
          { title: '单价', dataIndex: 'productPrice', scopedSlots: { customRender: 'status' } },
          { title: '数量', dataIndex: 'productNum' },
          { title: '金额', dataIndex: 'productAmount' }
        ],
        orderDetailsData: [],
        //操作按钮
        operator: [
          {
            name: '添加',
            icon: 'plus',
            that: this,
            handler: function(table, that) {
              that.$refs.modal.handleShow()
            }
          },
          {
            name: '删除',
            icon: 'delete',
            batch: true,
            handler: function(table) {
              table.remove()
            }
          }
        ]
      }
    },
    computed: {},
    methods: {
      searchHandler(params) {
        this.$refs.table.refresh(true, params)
      },
      getText: function(value) {
        if (value == 1) {
          return '已上架'
        }
        if (value == 2) {
          return '已下架'
        }
        if (value == 3) {
          return '违规下架'
        }
      },
      getImages(sku) {
        let images = sku.images
        if (images != '' && images.indexOf('[{') > -1) {
          let obj = JSON.parse(images)
          if (obj && obj.length > 0) {
            return obj[0].url
          }
        }
        return images
      },
      cancleOrder(orderId) {
        this.http.confirm(this, {
          content: '确认取消订单吗?',
          url: this.api.order.cancel,
          data: {
            orderId: orderId
          },
          success: function(me, data) {
            me.$refs.table.refresh(false)
            me.$nextTick(function() {
              this.$emit('countOrder')
            })
          }
        })
      },
      setData(state) {
        let params = {
          orderState: state
        }
        this.$refs.table.refresh(true, params)
      },
      onSuccess() {
        this.$nextTick(function() {
          this.$emit('countOrder')
        })

      },
      onExpand(expanded, record) {
        if (expanded) {
          this.orderDetailsData = []
          this.http.get(this, {
            url: this.api.orderDetails.list,
            data: {
              params: {
                orderId: record.orderId
              }
            },
            success: function(me, data) {
              me.orderDetailsData = data
            }
          })
        }
      }
    },
    created() {

    }
  }
</script>
<style scoped lang="less" rel="stylesheet/less">

  .single-item {
    text-align: center;
    float: left;
    margin-right: 8px;
    border: 1px solid #E1E6F0;
    width: 180px;
    height: 180px;
    padding: 10px;
    cursor: pointer;
  }

  .single-item .hold-img {
    padding: 5px;
  }


  .single-item p {
    margin: 0px;
    width: 140px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .single-item .spec-title {
    margin-top: 5px;

    color: #00A0E9;
  }

  .single-item .row-term p {
    width: 160px;
    text-align: left;
  }

  .product-title {
    display: inline-block;
    text-align: left;
    padding-left: 20px;
  }

  .row-title {
    display: inline-block;
    text-align: center;
    padding-left: 20px;
  }

</style>
